<template>
	<view class="nav sp_be" :style="{'background-color': background, color:color }">
		<!-- 普通tar -->
		<text v-if="userImg==undefined && goback == undefined" @click="tologin()">登录</text>
		<!-- 白色返回 -->
		<image v-else-if="goback==='gobackF'" @click="gotoback" class="goback" src="/static/imgs/about_slices/5.png"></image>
		<!-- 黑色返回 -->
		<image v-else-if="goback==='goback0'" @click="gotoback" class="goback" src="/static/imgs/about_slices/3.png"></image>
		<!-- 头像 -->
		<image v-else class="userImg" @click="toMember()" :src="userinfo.headImg" ></image>
		<!-- 搜索功能 开始 -->
		<view v-if="title == undefined" class="search flx-row flx DTD"  style="justify-content: center;align-items: center;width: 526rpx;" :style="inputStyle">
			<image src="/static/imgs/mi_slices/mi_slices.png" style="width: 33rpx;" mode="widthFix"></image>
			<input :style="inputColorStyle" v-model="where"  @search="search()" @custom="custom()" type="text" style="width: 300rpx;" placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 400;" :placeholder-style="placeholderStyle" :placeholder='placeholderTxt' confirm-type="search"/>
		</view>
		<!-- 搜索功能 结束 -->
		<view v-else>
			{{title}}
		</view>
		<view v-if="searchTip==undefined" class="Tips end_top" @click="tonavigateTo('/pages/public/msg/msg')">
			<image src="/static/images/icon/email.png" mode="widthFix" style="width: 46rpx;height: 46rpx;"></image>
			<!-- <view class="mail_Tips"></view> -->
		</view>
		<view v-else>
			<image  v-if="searchTip=='searchimg'" class="searchTip" src="/static/imgs/qidongye_slices/9.png" @click="tonavigateTo('/pages/public/search/search')"></image>
			<text v-else>{{searchTip}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//搜索框背景色
			searchBg:{
				type:String,
				default:'#FFFFFF'
			},
			//placeholder 样式
			placeholderStyle:{
				type:String,
				default:''
			},
			//placeholder text
			placeholderTxt:{
				type:String,
				default:'搜索股票/资讯/选股/板块'
			},
			// 字体颜色
			color: {
				type: String,
				default: "#FFFFFF"
			},
			// input 样式
			inputColorStyle: {
				type: String,
				default: ""
			},
			//搜索框自定义样式
			inputStyle:{
				type:String,
				default:''
			},
			// 背景色
			background: {
				type: String,
				default: "#EE515A"
			},
			// 标题
			title: {
				type: String,
				default: undefined
			},
			// 返回箭头
			goback: {
				type: String,
				default: undefined
			},
			//右边的搜索小图标
			searchTip: {
				type: String,
				default: undefined
			}
		},
		data() {
			return {
				where: "",
				userImg: undefined,
				userinfo: {
					headImg:"/static/imgs/my_slices/13.png"
				},
			};
		},
		methods: {
			// 新增功能
			userInfo: function() {
				this.$Request.get(this.$api.index.userInfo).then(res => {
					this.userinfo = [];
					if(res.data){
						this.userinfo.headImg = '/static/images/headImg/'+ (res.data.card_pic ? res.data.card_pic : 1)+'.png'
					}
				})
			},
			search(e) {
				uni.navigateTo({
					url: "/pages/public/search/search?where=" + this.where,
				})
			},
			custom(e) {
				uni.navigateTo({
					url: "/pages/public/search/search?where=" + this.where,
				})
			},
			// 跳转页面
			tonavigateTo(url){
				uni.navigateTo({
					url:url
				})
			},
			// 返回
			gotoback(){
				uni.navigateBack({delta: 1})
			},
			// 跳转去登录页面
			tologin(){
				uni.navigateTo({
					url: '/pages/public/login/login',
				});
			},
			// 去会员
			toMember(){
				console.log("-------去会员中心--------")
				uni.switchTab({
					url: '/pages/member/member'
				})
			}
		},
		onLoad() {
			this.where = ''
		},
		// beforeCreate(){
		//       console.log("创建前===>胚胎")
		// },
		created(){
			this.userInfo()
			this.userImg = this.$SysCache.get("keep_phone_flag")
			if(this.userImg == false){
				this.userImg = undefined
			}
			console.log(this.$SysCache.get("keep_phone_flag"),"<---this is userImg")
			console.log(this.$props.goback,"<---this is goback")
		    //console.log("创建完成===>出生")
		},
		// beforeMount(){
		//       console.log("挂载前===>幼儿园")
		// },
		activated(){
			this.userInfo()
			this.userImg = this.$SysCache.get("keep_phone_flag")
			if(this.userImg == false){
				this.userImg = undefined
			}
			console.log(this.$SysCache.get("keep_phone_flag"),"<---this is userImg")
			console.log(this.$props.goback,"<---this is goback")
		    //console.log("激活===>课外班：知识升级")
		},
		// deactivated(){
		//       console.log("停止===>逃课打架：自暴自弃（多用于离开页面，比如切换页签（？））")
		// },
		// mounted(){
		//       console.log("挂载结束===>小学：知识消化（多用于配合监听及跨页面数据加载使用）")
		// },
		// beforeUpdate(){
		//       console.log("更新前===>初中：知识迭带（多用于异步更新前对页面数据的处理）")
		// },
		// updated(){
		//       console.log("更新完成===>高中：知识巩固")
		// },
		// beforeDestroy(){
		//       console.log("销毁前===>大学：思维碰撞（多用于关闭页面时对页面数据的操作）")
		// },
		// destroyed(){
		//       console.log("销毁完成===>毕业：现实世界（销毁页面时的操作，比如数据缓存清空等）")
		// }
	}
</script>

<style lang="scss" scoped>
	.DTD{
		
	}
	.nav {
		width: 100%;
		height: 80rpx;
		// background: #EE4343;
		padding-left: 30rpx;
		padding-right: 30rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		.searchTip {
			width: 36rpx;
			height: 36rpx;
		}

		.userImg {
			width: 66rpx;
			height: 66rpx;
			border-radius: 50%;
		}

		.goback {
			width: 40rpx;
			height: 40rpx;
		}

		.search {
			width: 518rpx;
			height: 60rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			background: #020204;
			border-radius: 6rpx;

			input {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

			}

			image {

				width: 22px;
				height: 21px;
				margin-right: 10rpx;
			}

		}

		.Tips {

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.mail_Tips {
				width: 16rpx;
				height: 16rpx;
				background: #E02C3A;
				border-radius: 50%;
			}
		}
	}
</style>
